<template>
  <div class="frame-quick-CustomerServiceStatus">
    <el-popover 
      placement="bottom"
      popper-class="line-popover"
      v-model="tipVisible"
      width="240"
      trigger="manual"
    >
      <template slot="reference">
        <!-- 状态图标 -->
        <span 
          class="status-dot cursor-pointer iconfont icon-message1" 
          @click="onClickCustomerService" 
        >
          <i class="dot" :style="{'background-color': serviceStatusMap[serviceStatus].color}"></i>
        </span>

        <el-popover placement="bottom" trigger="click">
          <span slot="reference">
            <!-- 当前状态 -->
            <span class="service-status-text cursor-pointer">{{ serviceStatusMap[serviceStatus].text }}</span>
          </span>

          <div class="customer-service-info">
            <div class="customer-service-top">
              <span>{{ $t('common.base.onlineService') }}</span>
              <el-dropdown placement="bottom" trigger="hover" @command="handleCommand">
                <div class="service-status-dropdown">
                  <span class="dot" :style="{'background-color': serviceStatusMap[serviceStatus].color}"></span>
                  {{ serviceStatusMap[serviceStatus].text }}
                  <i class="iconfont icon-triangle-down"></i>
                </div>

                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-show="serviceStatus==1" :command="2">
                    <span class="dot" :style="{'background-color': serviceStatusMap[2].color}"></span>
                    {{ $t('frame.backgroundTask.text17') }}
                  </el-dropdown-item>
                  <el-dropdown-item v-show="serviceStatus==2" :command="4">
                    <span class="dot" :style="{'background-color': serviceStatusMap[1].color}"></span>
                    {{ $t('frame.backgroundTask.text18') }}
                  </el-dropdown-item>
                  <el-dropdown-item v-show="serviceStatus==3" :command="2">
                    <span class="dot" :style="{'background-color': serviceStatusMap[2].color}"></span>
                    {{ $t('frame.backgroundTask.text17') }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            
            <div class="customer-service-bottom">
              <span>{{ serviceInfo.customerServiceName || '' }}</span>
            </div>

          </div>
        </el-popover>
      </template>

      <!-- 提示弹出框 -->
      <div class="line-tip">
        <span>
          <i class="el-icon-close" @click="handleClose"></i>
        </span>
        <div>{{ $t('frame.backgroundTask.tip7') }}</div>
        <el-button type="primary" @click="handleConfirm">{{ $t('common.base.makeSure') }}</el-button>
      </div>
    </el-popover>
  </div>
</template>

<script>
import { openTabCustomerService } from '@src/util/business/openTab';
import * as IMApi from '@src/api/ImApi.js';

export default {
  name: 'customer-service-status',
  props: {
    serviceStatus: {
      type: [String, Number],
      default: '',
    },
    serviceInfo: {
      type: Object,
      default: () => ({})
    },
    changeServiceStatus:{
      type:Function,
      default:()=>()=>{}
    },
    tipVisible: {
      type: Boolean,
      default: false,
    }
  },
  emits: ['updateTipVisible'],
  data() {
    return {
      serviceStatusMap: {
        1: {
          color: '#00C853',
          text: this.$t('common.base.usualStatus.working'),
          info: this.$t('frame.backgroundTask.text19'),
        },
        2: {
          color: '#D4D4D4',
          text: this.$t('common.base.usualStatus.resting'),
          info: this.$t('frame.backgroundTask.text20'),
        },
        3: {
          color: '#FFA726',
          text: this.$t('common.base.usualStatus.busy'),
          info: this.$t('frame.backgroundTask.text21'),
        },
      },
    };
  },
  methods: {
    async handleCommand(command) {
      try {
        if (this.serviceStatus === 3 || this.serviceStatus === 1) {
          const { code, data } = await IMApi.getLineConversationNum();
          if (code === 0 && data > 0) {
            await this.$confirm(this.$t('im.imChat.components.customerList.tips8'), this.$t('common.base.toast'));
          }
        }

        this.$emit('changeServiceStatus', command)
        this.$track.clickStat(this.$track.formatParams('CUSTOMER_SERVICE_STATUS_SWITCHING'));
      } catch (error) {
        console.error('getLineConversationNum error', error)
      }
    },
    onClickCustomerService(){
      openTabCustomerService();
    },
    handleClose() {
      this.$emit('updateTipVisible', false);
    },
    handleConfirm() {
      this.$emit('changeServiceStatus', 2)
      this.handleClose();
    }
  },
};
</script>
<style scoped lang="scss">
  .frame-quick-CustomerServiceStatus{
    font-size: 14px;
    padding: 0 12px;

    .status-text{
      color: #8C8C8C;
    }
  }

::v-deep .el-dropdown-item:hover {
  background: $hover-bg-color-level-1 !important;
  color: $text-color-regular !important;
}
::v-deep .el-dropdown-menu__item {
  font-size: 14px;
}
</style>
<style lang="scss">
  .custom-popper{
    z-index: 99 !important;
  }

.line-popover {
  .line-tip {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;

    i {
      font-size: 16px;
      cursor: pointer;
    }

    div {
      margin: 10px 0;
    }
  }
}
</style>
